<!DOCTYPE html>
<html lang="en">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
    <meta charset="UTF-8">
    <title>OA-app与H5交互Demo</title>
    <script src="/dist/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/dist/plugins/vue/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <h3>JSBridge Demo</h3>
    </div>

    界面交互(ui)
    <ul class="list">
        <li>
            <div>
                <button @click="alert(1)">
                    禁用默认alert()
                </button>
                <button @click="confirm(1)">
                    禁用默认confirm()
                </button>
            </div>
        </li>
        <br/>
        <li>
            <div>
                <button @click="showToast('提示内容')">
                    弹出提示
                </button>
                <button @click="showDialog">
                    弹出对话框
                </button>
                <div style="font-size: 12px">对话框回调结果:{{dialogResult}}</div>
            </div>
        </li>
        <li>
            <div>
                <button @click="showLoading">
                    显示加载框, 3秒后自动隐藏加载框
                </button>
            </div>
        </li>
        <br/>
        <li>
            <div>
                <button @click="testThread">
                    点击3s后回调
                </button>
            </div>
            <div style="font-size: 12px">回调结果:{{waitResult}}</div>
        </li>
        <br/>
    </ul>

    设备(device)
    <ul class="list">
        <li>
            <div>
                <button @click="makePhoneCall">
                    去拨号界面
                </button>
                <button @click="toApplicationSettings">
                    去应用设置界面
                </button>
            </div>
        </li>
        <br/>
    </ul>


    网络(network)
    <ul class="list">
        <li>
            <div>
                <button @click="getOperatorName">
                    获取运营商
                </button>
                <button @click="getNetworkType">
                    获取网络类型
                </button>
                <button @click="isNetConnected">
                    是否可上网
                </button>
                <button @click="isWifiConnected">
                    是否wifi连接
                </button>
            </div>
        </li>
        <br/>
    </ul>

    屏幕(screen)
    <ul class="list">
        <li>
            <div>
                <button @click="getScreenInfo">
                    获取屏幕信息
                </button>
            </div>
        </li>
        <br/>
    </ul>

</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            waitResult: "",
            dialogResult: "",
        },
        methods: {


            // ---------------ui-----------------
            showToast: function (title) {
                var param = {
                    title: title
                }
                JSBridge.call(ui, 'showToast', param)
            },
            showDialog: function () {
                var that = this
                var param = {
                    title: "提示的标题",
                    content: "提示的内容",
                    cancelText: "no",
                    confirmText: "yes",
                    showCancel: true,
                    cancelable: false
                }
                that.dialogResult = "等待选择..."
                JSBridge.call(ui, 'showDialog', param, function (res) {
                    that.dialogResult = res
                })
            },
            showLoading: function () {
                var that = this
                var param = {
                    title: "加载自定义...",
                }
                JSBridge.call(ui, 'showLoading', param)

                setTimeout(function () {
                    that.hideLoading()
                }, 3000)
            },
            hideLoading: function () {
                JSBridge.call(ui, 'hideLoading')
            },
            testThread: function () {
                var that = this
                that.waitResult = "执行中..."
                JSBridge.call(ui, 'testThread', {}, function (res) {
                    that.waitResult = res
                })
            },


            // ---------------device-----------------
            makePhoneCall: function () {
                var param = {
                    phoneNumber: "13811111111",
                }
                JSBridge.call(device, 'makePhoneCall', param)
            },
            toApplicationSettings: function () {
                JSBridge.call(device, 'toApplicationSettings', {})
            },


            // ---------------network-----------------
            getOperatorName: function () {
                var that = this
                JSBridge.call(network, 'getOperatorName', {}, function (res) {
                    that.showToast(res)
                })
            },
            getNetworkType: function () {
                var that = this
                JSBridge.call(network, 'getNetworkType', {}, function (res) {
                    that.showToast(res)
                })
            },
            isNetConnected: function () {
                var that = this
                JSBridge.call(network, 'isNetConnected', {}, function (res) {
                    that.showToast(res)
                })
            },
            isWifiConnected: function () {
                var that = this
                JSBridge.call(network, 'isWifiConnected', {}, function (res) {
                    that.showToast(res)
                })
            },

            // ---------------screen-----------------
            getScreenInfo: function () {
                var that = this
                JSBridge.call(screen, 'getScreenInfo', {}, function (res) {
                    that.showToast(res)
                })
            },
        },
    })
</script>
</body>
</html>